<template>
    <div class="bg">
        <div class="header"></div>
        <div class="main">
            <div class="title">用户登录</div>
            <hr/>
            <div class="form myClass">
                <el-form :model="userInfo">
                    <el-form-item>
                        <el-input prefix-icon="el-icon-user-solid" v-model="userInfo.account" class="input1"
                                  placeholder="用户名"/>
                    </el-form-item>
                    <el-form-item>
                        <el-input prefix-icon="el-icon-s-home" v-model="userInfo.password" class="input2"
                                  type="password" placeholder="密码"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="login" v-loading.fullscreen.lock="fullscreenLoading">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="footer"></div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                userInfo: {
                    account: "",
                    password: ""
                },
                fullscreenLoading: false
            }
        },
        methods: {
            login() {
                let that = this;
                this.$axios({
                    method: "get",
                    url: "/userController/loginAndSaveInfo",
                    params: {
                        account: this.userInfo.account,
                        password: this.userInfo.password
                    }
                }).then(response => {
                    if (!response.data) {
                        this.$alert('用户名或密码错误', '提示', {
                            confirmButtonText: '确定'
                        })
                    } else {
                        this.$store.commit("setUserInfo", response.data);
                        that.fullscreenLoading = true;
                        that.loadUserInfo()
                    }
                }).catch(error => {
                    console.log(error)
                })
            },
            loadUserInfo() {
                //获取用户的角色id和name
                let that = this;
                this.$axios({
                    method: "get",
                    url: "/roleController/getRoleById",
                    params: {
                        id: this.$store.state.userInfo.user_id
                    }
                }).then(response => {
                    this.$store.commit("setRole", response.data);
                    that.getAllUserInfoAndRole()
                }).catch(error => {
                    console.log(error)
                })
            },
            getAllUserInfoAndRole() {
                // 获取全部的账号信息和对应的角色
                let that = this;
                this.$axios({
                    method: "get",
                    url: "/userController/getAllUserInfoAndRole",
                    params: {}
                }).then(response => {
                    this.$store.commit("setAllUser",response.data);
                    that.getAllRole()
                }).catch(error => {
                    console.log(error)
                })
            },
            getAllRole() {
                // 获取全部的角色
                let that = this;
                this.$axios({
                    method: "get",
                    url: "/roleController/getAllRole"
                }).then(response => {
                    this.$store.commit("setAllRole",response.data);
                    that.getAllPermissions()
                }).catch(error => {
                    console.log(error)
                })
            },
            getAllPermissions() {
                let that = this;
                // 获取全部的权限列表
                this.$axios({
                    method: "get",
                    url: "/permissionsController/getPermissions"
                }).then(response => {
                    this.$store.commit("setAllPermissions", response.data);
                    that.loadPermissionsList()
                }).catch(error => {
                    console.log(error)
                })
            },
            loadPermissionsList() {
                //获取当前角色可以渲染的权限列表
                let that = this;
                this.$axios({
                    method: "get",
                    url: "/permissionsController/getPermissionsListAndRouter",
                    params: {
                        role_id: this.$store.state.userInfo.role_id
                    }
                }).then(response => {
                    this.$store.commit("setPermissionsList", response.data);
                    that.loadUserPermissions()
                }).catch(error => {
                    console.log(error)
                })
            },
            loadUserPermissions() {
                //获取当前角色所拥有的权限列表
                let that = this;
                this.$axios({
                    method: "get",
                    url: "/permissionsController/getPermissionsListByRole",
                    params: {
                        role_id: this.$store.state.userInfo.role_id
                    }
                }).then(response => {
                    this.$store.commit("setUserPermissions", response.data);
                    that.fullscreenLoading = false;
                    this.$router.replace("/main")
                }).catch(error => {
                    console.log(error)
                })
            }
        }
    }
</script>
<style>
    .myClass input.el-input__inner {
        height: 50px;
        border-radius: 32px;
        background-color: #f2f2f2;
        border-width: 0;
    }
</style>
<style scoped>
    .bg {
        width: 100%;
        height: 100%;
        background-image: url(../assets/img/login-background-img.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }

    .header {
        width: 100%;
        height: 30%;
    }

    .main {
        width: 30%;
        height: 40%;
        margin-left: 35%;
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

    .footer {
        width: 100%;
        height: 30%;
    }

    .title {
        font-weight: bold;
        border-radius: 16px 16px 0 0;
        font-size: 35px;
        width: 100%;
        text-align: center;
        height: 23%;
        line-height: 90px;
    }

    .form {
        width: 100%;
        height: 75%;
    }

    .input1 {
        margin-left: 10%;
        width: 80%;
        margin-top: 30px;
    }

    .input2 {
        margin-left: 10%;
        width: 80%;
    }

    .el-button {
        width: 20%;
        margin-left: 70%;
        border-radius: 32px;
    }
</style>